<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>填写订单信息 - Powered By ${systemConfig.systemName}</title>  <link rel="icon" href="/template/pc1/images/wmh_favicon.ico" type="image/x-icon" />
<meta name="Author" content="Meida Team" />
<meta name="Copyright" content="Meida" />
<link rel="icon" href="/template/pc1/images/wmh_favicon.ico" type="image/x-icon" />
<% include("include.html"){}%>
<link href="/template/pc1/css/login.css" rel="stylesheet" type="text/css" />
<link href="/template/pc1/css/register.css" rel="stylesheet" type="text/css" />
<link href="/template/pc1/css/order.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/template/pc1/js/login.js"></script>
<script type="text/javascript" src="/template/pc1/js/register.js"></script>
<script type="text/javascript">
$().ready( function() {

	var productTotalPrice = ${productTotalPrice};// 商品总价格
	var deliveryFee = 0;// 配送费用
	var paymentFee = 0;// 支付费用
	
	var $orderInfoForm = $("#orderInfoForm");
	var $areaSelect = $(".areaSelect");
	var $receiverInput = $("input[name='receiver.id']");
	var $otherReceiverTable = $("#otherReceiverTable");
	var $otherReceiverTableInput = $(".otherReceiverTable :input");
	var $deliveryTypeInput = $("input[name='deliveryType.id']");
	var $paymentConfigTr = $(".paymentConfigTr");
	var $paymentConfigInput = $("input[name='paymentConfig.id']");
	var $productTotalPrice = $("#productTotalPrice");
	var $deliveryFee = $("#deliveryFee");
	var $paymentFee = $("#paymentFee");
	var $orderAmount = $("#orderAmount");
	
	// 地区选择菜单
	$areaSelect.lSelect({
		url: "/area/ajaxChildrenArea"// Json数据获取url
	});
	
	// 如果默认选择“其它收货地址”，则显示“其它收货地址输入框”
	if ($receiverInput.val() == "") {
		$otherReceiverTable.fadeIn();
		$otherReceiverTableInput.removeClass("ignoreValidate");
	} else {
		$otherReceiverTableInput.addClass("ignoreValidate");
	}
	
	// 显示“其它收货地址输入框”
	$receiverInput.click( function() {
		$this = $(this);
		if ($this.val() == "") {
			$otherReceiverTable.fadeIn();
			$otherReceiverTableInput.removeClass("ignoreValidate");
		} else {
			$otherReceiverTable.fadeOut();
			$otherReceiverTableInput.addClass("ignoreValidate");
		}
	});
	
	// 根据配送方式修改配送费用、订单总金额，并显示/隐藏支付方式
	$deliveryTypeInput.click( function() {
		var $this = $(this);
		var $parent = $this.parent();
		$paymentConfigInput.attr("checked", false);
		paymentFee = 0;
		var deliveryMethod = $parent.metadata().deliveryMethod;
		if (deliveryMethod == "deliveryAgainstPayment") {
			$paymentConfigInput.removeClass("ignoreValidate");
			$paymentConfigTr.show();
		} else {
			$paymentConfigInput.addClass("ignoreValidate");
			$paymentConfigTr.hide();
		}
		deliveryFee = $parent.metadata().deliveryFee;
		$deliveryFee.text(orderUnitCurrencyFormat(deliveryFee));
		$paymentFee.text(orderUnitCurrencyFormat(paymentFee));
		$orderAmount.text(orderUnitCurrencyFormat(floatAdd(floatAdd(productTotalPrice, deliveryFee), paymentFee)));
	});
	
	// 根据支付方式修改订单总金额
	$paymentConfigInput.click( function() {
		var $this = $(this);
		var $parent = $this.parent();
		var paymentFeeTypeChecked = $parent.metadata().paymentFeeType;
		var paymentFeeChecked = $parent.metadata().paymentFee;
		if (paymentFeeTypeChecked == "scale") {
			paymentFee = floatMul(floatAdd(productTotalPrice, deliveryFee), floatDiv(paymentFeeChecked, 100));
		} else {
			paymentFee = paymentFeeChecked;
		}
		$paymentFee.text(orderUnitCurrencyFormat(paymentFee));
		$orderAmount.text(orderUnitCurrencyFormat(floatAdd(productTotalPrice, floatAdd(deliveryFee, paymentFee))));
	});
	
	// 表单验证
	$orderInfoForm.validate({
		ignore: ".ignoreValidate",
		invalidHandler: function(form, validator) {
			$.each(validator.invalid, function(key, value){
				$.tip(value);
				return false;
			});
		},
		errorPlacement:function(error, element) {},
		submitHandler: function(form) {
			$orderInfoForm.find(":submit").attr("disabled", true);
			form.submit();
		}
	});


	$(document).on("change",'.changeAddress',function () {
		$this=$(this);
		getAllDeliverFee($this.val());
    });

	//计算运费
    var receiverId= $('input:radio[name="receiver.id"]:checked').val();
    if(receiverId){
        getAllDeliverFee(''+receiverId+'');

    }
    function getAllDeliverFee(receiverId) {
        $.ajax({
            url: "getAllDeliverFee",
            type: 'GET',
            dataType:'json',
            data:{
                "receiverId":receiverId,
            },
            success: function(data){
                if(data.state=='ok'){
                    var productTotalPrice=parseFloat("${productTotalPrice}");
                    var deliveryFee=parseFloat(data.deliveryFee);
                    $(".deliveryFee").html("+￥"+data.deliveryFee)//运费
                    $("#orderAmount").html("￥"+(productTotalPrice+deliveryFee)+"元");
                    $(".hiddenDeliveryFee").val(deliveryFee);
                    //var firstProvinceId = $('#sel-provance').find("option:selected").next().val();
                }
            }
        });
    }
	
});
</script>
</head>
<body class="orderInfo">
	<%include("header_index_sys.html"){}%>
	<div class="body">
		<div class="blank"></div>
		<div class="orderInfoDetail">
			<form id="orderInfoForm" action="/b/pc/order/save" method="post">
				<table class="orderInfoTable">
					<tr>
						<th>收货信息</th>
						<td>
							<ul>
								<%for(list in loginMember.receiverList){%>
									<li>
										<label>
											<input type="radio" name="receiver.id" class="{required: true, messages: {required: '请选择收货地址！'}} changeAddress"  value="${list.id}"<%if (list.isDefault){%> checked<%}%> />
											<strong>收货人：</strong>${list.name}&nbsp;&nbsp;&nbsp;&nbsp;
											<%if (list.mobile != null){%>
												<strong>手机：</strong>${list.mobile}&nbsp;&nbsp;&nbsp;&nbsp;
											<%}else{%>
												<strong>电话：</strong>${list.phone}&nbsp;&nbsp;&nbsp;&nbsp;
											<%}%>
											<strong>收货地址：</strong>${list.address}
										</label>
									</li>
								<%}%>
								<li>
									<label>
										<input type="radio" name="receiver.id" class="{required: true, messages: {required: '请选择收货地址！'}}" value=""<%if (loginMember.receiverList == null || loginMember.receiverList.~size == 0){%> checked<%}%> />
										填写收货地址
									</label>
									<div class="blank"></div>
									<table id="otherReceiverTable" class="otherReceiverTable">
										<tr>
											<th>
												收货人姓名:
											</th>
											<td>
												<input type="text" name="receiver.name" class="formText {required: true, messages: {required: '请填写收货人姓名！'}}" />
												<label class="requireField">*</label>
											</td>
										</tr>
										<tr>
											<th>
												地区:
											</th>
											<td>
												<div class="controls">
													<select id="sel-provance" class="pull-left form-control">
														<option value="">请选择</option>
													</select>
													<select id="sel-city" class="pull-left form-control">
														<option value="">请选择</option>
													</select>
													<select id="sel-area" class="pull-left form-control">
														<option value="">请选择</option>
													</select>
												</div>
											</td>
										</tr>
										<tr>
											<th>
												地址:
											</th>
											<td>
												<input type="text" name="receiver.address" class="formText {required: true, messages: {required: '请填写地址！'}}" />
												<label class="requireField">*</label>
											</td>
										</tr>
										<tr>
											<th>
												电话:
											</th>
											<td>
												<input type="text" name="receiver.phone" class="formText {requiredOne: '#shipMobile', phone: true, messages: {requiredOne: '电话、手机必须填写其中一项！'}}" />
												<label class="requireField">*</label>
											</td>
										</tr>
										<tr>
											<th>
												手机:
											</th>
											<td>
												<input type="text" id="shipMobile" name="receiver.mobile" class="formText {mobile: true, messages: {mobile: '手机格式错误！'}}" />
												<label class="requireField">*</label>
											</td>
										</tr>
										<tr>
											<th>
												邮编:
											</th>
											<td>
												<input type="text" name="receiver.zipCode" class="formText {required: true, zipCode: true, messages: {required: '请填写邮编！', zipCode: '邮编格式错误！'}}" />
												<label class="requireField">*</label>
											</td>
										</tr>
										<tr>
											<th>
												是否保存:
											</th>
											<td>
												<label><input type="radio" name="isSaveReceiver" value="true" checked />是</label>&nbsp;&nbsp;
												<label><input type="radio" name="isSaveReceiver" value="false" />否</label>
											</td>
										</tr>
									</table>
								</li>
							</ul>
						</td>
					</tr>
					<tr class="paymentConfigTr">
						<th>支付方式</th>
						<td>
							<table class="paymentConfigTable">
                                <%if(browserType! =="weixinBrowser"){%><!--微信浏览器-->
									<%for(list in allPaymentConfig){%>
										<tr>
											<th>
												<label class="{paymentFeeType: '${list.paymentFeeType}', paymentFee: '${list.paymentFee}'}">
													<input type="radio" name="paymentConfig_id" class="{required: true, messages: {required: '请选择支付方式！'}}" value="${list.id}" />
													${list.name}
												</label>
											</th>
											<td>
												<%if (list.paymentFeeType == "scale" && list.paymentFee != 0){%>
													[支付费率：${list.paymentFee}%]
												<%}else if(list.paymentFeeType == "fixed" && list.paymentFee != 0){%>
													[支付费用：${list.paymentFee,orderUnitCurrencyFormat}]
												<%}%>
												<p>${list.description!}</p>
											</td>
										</tr>
									<%}%>
                                <%}else{%>
									<%for(list in allPaymentConfig){%>
										<%if(list.paymentConfigTypeValue!="weixin" && list.paymentConfigTypeValue=="alipay"){%><!--非微信浏览器不显示微信支付方式-->
											<tr>
												<th>
													<label class="{paymentFeeType: '${list.paymentFeeType}', paymentFee: '${list.paymentFee}'}">
														<input type="radio" name="paymentConfig_id" class="{required: true, messages: {required: '请选择支付方式！'}}" value="${list.id}" />
													${list.name}
													</label>
												</th>
												<td>
													<%if (list.paymentFeeType == "scale" && list.paymentFee != 0){%>
													[支付费率：${list.paymentFee}%]
													<%}else if(list.paymentFeeType == "fixed" && list.paymentFee != 0){%>
													[支付费用：${list.paymentFee,orderUnitCurrencyFormat}]
													<%}%>
													<p>${list.description!}</p>
												</td>
											</tr>
										<%}%>
									<%}%>
                                <%}%>
							</table>
						</td>
					</tr>
					<tr>
						<td colspan="2">&nbsp;</td>
					</tr>
					<tr>
						<th>附言</th>
						<td>
							<input type="text" name="memo" class="formText" />
						</td>
					</tr>
					<tr>
						<td colspan="2">&nbsp;</td>
					</tr>
				</table>
				<div class="blank"></div>
				<table class="cartItemTable">
					<tr>
						<th>商品</th>
						<th>销售价格</th>
						<%if (loginMember.memberRankValue.preferentialScale! != 100){%>
							<th>优惠价格</th>
						<%}%>
						<th>商品重量</th>
						<th>小计</th>
						<th>数量</th>
					</tr>
					<%for(list in cartItemList){%>
						<%var product=list.product;%>
						<tr>
							<td class="productName">
								<a href="${product.htmlFilePath}" target="_blank">
									<img src="${product.productImageList[0].bigProductImagePath!systemConfig.defaultThumbnailProductImagePath}" /> ${list.product.name}
								</a>
							</td>
							<%if (loginMember.memberRankValue.preferentialScale! != 100){%>
								<td class="priceTd">
									<span class="lineThrough">${product.price,priceCurrencyFormat}</span>
								</td>
								<td class="priceTd">
									${list.preferentialPrice,priceCurrencyFormat}
								</td>
							<%}else{%>
								<td class="priceTd">
									${product.price,priceCurrencyFormat}
								</td>
							<%}%>
							<td>
								${product.weight} ${i18n("WeightUnit." + product.weightUnitValue)}
							</td>
							<td>
								<span class="subtotalPrice">${list.subtotalPrice,orderCurrencyFormat}</span>
							</td>
							<td>
								${list.quantity}
							</td>
						</tr>
					<%}%>
					<tr>
						<td class="info" colspan="<%if (loginMember.memberRankValue.preferentialScale! != 100){%>6<%}else{%>5<%}%>">
							商品共计：<span class="red">${totalQuantity}</span> 件&nbsp;&nbsp;&nbsp;&nbsp;
							<!--<%if (systemConfig.pointType != "disable"){%>
								积分：<span id="totalPoint" class="red">${totalPoint!}</span>&nbsp;&nbsp;&nbsp;&nbsp;
							<%}%>-->
							商品总金额：<span id="productTotalPrice" class="red">${productTotalPrice,orderUnitCurrencyFormat}</span>&nbsp;&nbsp;&nbsp;&nbsp;
							配送费用：<span id="deliveryFee" class="red deliveryFee">+￥0.00</span>&nbsp;&nbsp;&nbsp;&nbsp;
							支付手续费：<span id="paymentFee" class="red">${0,orderUnitCurrencyFormat}</span>&nbsp;&nbsp;&nbsp;&nbsp;
							订单总金额：<span id="orderAmount" class="red">${productTotalPrice,orderUnitCurrencyFormat}</span>
						</td>
					</tr>
				</table>
				<div class="blank"></div>
				<a class="backCartItem" href="/b/pc/cartItem/list"><span class="icon">&nbsp;</span>返回购物车</a>
				<input type="submit" class="formButton" value="去结算" />
				<div class="clearfix"></div>
			</form>
		</div>
		<div class="blank"></div>
		
	</div>
	<div class="blank"></div>
	<%include("footer.html"){}%>
</body>
<script>
    $(function () {
        //初始化省市区
        $.ajax({
            url: "/b/area/getAreaByParent",
            type: 'GET',
            dataType:'json',
            data:{
                "parent_id":""
            },
            success: function(data){
                if(data.state=='ok'){
                    $("#sel-provance").append(data.info);
                    //var firstProvinceId = $('#sel-provance').find("option:selected").next().val();
                }

            }
        });

        //省级改变
        $("#sel-provance").change(function () {
            var parent_id=this.value;
            //1.将区域清空
            $("#sel-area").html('<option value="">请选择</option>');
            //如果不选择区域,将城市清空
            if(!parent_id){
                $("#sel-city").html('<option value="">请选择</option>');
            }else{
                $.ajax({
                    url: "/b/area/getAreaByParent",
                    type: 'GET',
                    data:{
                        "parent_id":parent_id
                    },
                    success: function(data){
                        if(data.state=='ok'){
                            $("#sel-city").html(data.info);
                            parent_id=$("#sel-city").val();//取出当前选中城市id,根据当前选中的城市id,换取区域列表
                            $.ajax({
                                url: "/b/area/getAreaByParent",
                                type: 'GET',
                                data:{
                                    "parent_id":parent_id
                                },
                                success: function(data){
                                    if(data.state=='ok'){
                                        $("#sel-area").html(data.info);
                                    }
                                }
                            });
                        }else{
                            layer.msg(data.info);
                        }
                    }
                });
            }
        });

        //城市改变
        $("#sel-city").change(function () {
            var parent_id=this.value;
            $.ajax({
                url: "/b/area/getAreaByParent",
                type: 'GET',
                data:{
                    "parent_id":parent_id
                },
                success: function(data){
                    if(data.state=='ok'){
                        $("#sel-area").html(data.info);
                    }
                }
            });
        });


    })
</script>
</html>